<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <div class="skin_library">
    <div class="mb-[10px]">
      <el-card shadow="hover">
        <el-form ref="queryFormRef" :model="queryParams" :inline="true" size="small" label-width="120px">
          <el-form-item label="模板名称" prop="templateName">
            <el-input v-model="queryParams.templateName" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="业务场景" prop="businessId">
            <el-select v-model="queryParams.businessId" placeholder="请选择" clearable>
              <el-option v-for="item in scenes" :key="item.name" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="要素库类型" prop="databaseType">
            <el-select v-model="queryParams.databaseType" placeholder="请选择" clearable>
              <el-option v-for="item in dataBases" :key="item.name" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item style="padding-left: 120px">
            <el-button type="primary" icon="search" @click="doQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <el-card shadow="hover">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button size="small" type="primary" plain icon="Plus" @click="handleVisible('add', null)">新增模板</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @query-table="doQuery"></right-toolbar>
        </el-row>
      </template>

      <el-table v-loading="loading" :data="templateList" class="table-class">
        <el-table-column label="序号" type="index" width="60" fixed="left" />
        <el-table-column :label="item.label" v-for="item in defaultColunms" :key="item.label" :prop="item.prop" :fixed="item.fixed" />
        <el-table-column label="处理状态" prop="status">
          <template #default="scope">
            <div>
              {{ scope.row.status === 0 ? '未应用' : '已应用' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" fixed="right">
          <template #default="scope">
            <div>
              <el-tooltip content="修改" placement="top">
                <el-button size="small" link type="primary" icon="EditPen" @click="handleVisible('edit', scope.row)" v-show="scope.row.status === 0"
                  >修改</el-button
                >
              </el-tooltip>
              <el-tooltip content="详情" placement="top">
                <el-button
                  size="small"
                  link
                  type="primary"
                  icon="Document"
                  @click="handleVisible('detail', scope.row)"
                  v-show="scope.row.status === 1"
                  >详情</el-button
                >
              </el-tooltip>
              <el-tooltip content="导出" placement="top">
                <el-button
                  size="small"
                  link
                  type="primary"
                  icon="Download"
                  @click="handleVisible('export', scope.row)"
                  v-show="scope.row.status === 1"
                  >导出</el-button
                >
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button size="small" link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-show="scope.row.status === 0"
                  >删除</el-button
                >
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagenation">
        <el-pagination
          v-show="total > 0"
          layout="prev, pager, next,jumper"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <TemplateDetail :detailVisible="detailVisible" :row-data="currentData" v-if="detailVisible" @handleEvent="handleDetailEvent" />
    <AddTemplate :addVisible="addVisible" :type="addType" :rowData="currentData" v-if="addVisible" @handleEvent="handleEvent" />
  </div>
</template>
<script name="dataTemplate" setup>
import TemplateDetail from './component/TemplateDetail.vue';
import AddTemplate from './component/AddTemplate.vue';
import { downloadFile } from '@/views/elementLibrary/util/util';
import { getTemplateList, deletemplate, getScenesList, exportTemplateById } from '@/api/dataIntegration/dataTemplate/index';
// 业务场景
const scenes = ref([]);
// 要素库类型
const dataBases = ref([]);
const addVisible = ref(false);
const detailVisible = ref(false);
const templateList = ref([]);
const total = ref(0);
const loading = ref(false);
const currentData = ref(null);
const addType = ref('add');
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  templateName: '',
  databaseType: '',
  businessId: '',
  isAsc: 'descending'
});
const defaultColunms = ref([
  { label: '模板名称', prop: 'templateName', fixed: 'left' },
  { label: '业务场景', prop: 'businessSceneName', fixed: null },
  { label: '要素库类型', prop: 'databaseType', fixed: null },
  { label: '创建人', prop: 'createBy', fixed: null },
  { label: '创建时间', prop: 'createTime', fixed: null }
]);

const handleEvent = (data) => {
  if (data?.type === 'close') {
    addVisible.value = false;
  } else if (data?.type === 'refresh') {
    addVisible.value = false;
    doQuery();
  }
};
const handleDetailEvent = () => {
  detailVisible.value = false;
  currentData.value = null;
};
const handleVisible = (type, data) => {
  currentData.value = data;
  if (type === 'add') {
    addType.value = 'add';
    currentData.value = null;
    addVisible.value = true;
  }
  if (type === 'edit') {
    addType.value = 'edit';
    addVisible.value = true;
  }
  if (type === 'detail') {
    detailVisible.value = true;
  }
  if (type === 'export') {
    exportTemplateById(data.id).then((res) => {
      if (res) {
        downloadFile(res, data.templateName, 'xlsx');
      }
    });
  }
};
// 删除
const handleDelete = (data) => {
  ElMessageBox.confirm('是否确认删除该项？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deletemplate(data.id).then((res) => {
      ElMessage({ showClose: true, message: '删除成功。', type: 'success' });
      doQuery();
    });
  });
};
const doQuery = () => {
  templateList.value = [];
  loading.value = true;
  getTemplateList(queryParams.value)
    .then((res) => {
      if (res) {
        templateList.value = res?.rows || [];
        total.value = res.total;
      }
    })
    .finally(() => {
      loading.value = false;
    });
};
const handleCurrentChange = (num) => {
  queryParams.value.pageNum = num;
  doQuery();
};
// // 选择场景
// const sceneChange = (data) => {
//   console.log('change');
//   getDatabaseList({ sceneId: data }).then((res) => {
//     if (res) {
//       dataBases.value = res?.rows || [];
//     }
//   });
// };
onMounted(() => {
  doQuery();
  getScenesList({ pageSize: 1000, pageNum: 1 }).then((res) => {
    if (res) {
      scenes.value = res?.rows || [];
    }
  });
});
const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10,
    templateName: '',
    databaseType: '',
    businessId: '',
    isAsc: 'descending'
  };
  doQuery();
};
</script>
<style lang="scss" scoped>
.skin_library {
  height: calc(100vh - 84px);
  overflow: auto;
  width: 100%;
  .pagenation {
    display: flex;
    justify-content: end;
    margin-top: 10px;
  }
}
</style>